<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery.datagrid</title>
<link rel="stylesheet" type="text/css" href="../themes/default/linkbutton.css" />
<link rel="stylesheet" type="text/css" href="../themes/default/pagination.css" />
<link rel="stylesheet" type="text/css" href="../themes/default/datagrid.css" />
<link rel="stylesheet" type="text/css" href="../themes/icon.css" />
<script type="text/javascript" src="../jquery-1.10.2.js">
</script>
<script type="text/javascript" src="../jquery.json-2.4.js">
</script>
<script type="text/javascript" src="../src/jquery.parser.js">
</script>
<script type="text/javascript" src="../src/jquery.resizable.js">
</script>
<script type="text/javascript" src="../src/jquery.linkbutton.js">
</script>
<script type="text/javascript" src="../src/jquery.pagination.js">
</script>
<script type="text/javascript" src="../src/jquery.datagrid.js">
</script>
<script type="text/javascript" src="../demo/datagrid_data.json">
</script>
</head>
<body>
<div>
  <table class="xui-datagrid" data-options="rownumbers:true,singleSelect:true,nowrap:false" style="width:450px; height:300px;">
    <caption style="text-align:left;">
    DATAGRID
    </caption>
    <thead>
      <tr>
        <th rowspan="2" data-options="field:'chk',checkbox:true">&nbsp;</th>
        <th colspan="2">大标题</th>
        <th rowspan="2" data-options="field:'text3'">标题3</th>
      </tr>
      <tr>
        <th data-options="field:'text1',width:100">标题1</th>
        <th data-options="field:'text2',width:100">标题2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>
<script>
$('.xui-datagrid').datagrid({
    title: '测试',
  	data: datagrid_data,
    striped: true,
	pagination: true,
    onClickRow: function(rowIndex, rowData) {
        $('body').append('click' + rowIndex + '<br/>' + $.toJSON(rowData) + '<br/>');
    },
    onDblClickRow: function(rowIndex, rowData) {
        $('body').append('dblclick' + rowIndex + '<br/>');
    }
});
</script>
</body>
</html>